<template>
	<view class="page_wrapper">
		<view class="first_block">
			<image src="@/static/images/coin.png" class="coin_icon" mode="aspectFit"></image>
			<view class="my_coin_block">
				<view class="coin_num">{{fczCoin.totalCoin}}</view>
				<view class="coin_txt">学习币</view>
			</view>
		</view>
		<view v-for="(fczPrize, index ) in fczPrizeList" class="prize_block" @tap="exchangePrize(fczPrize)">
			<view class="left_block">
				<view class="prize_name">{{fczPrize.name}}</view>
				<view class="prize_remark">{{fczPrize.intro}}</view>
			</view>
			<view class="right_block">
				<view class="exchange_btn">点我兑换</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {request} from '@/utils/request.js'
	import {utils} from '@/utils/utils.js'
	export default {
		data() {
			return {
				fczCoin: {
					totalCoin: '0'
				},
				fczPrizeList: []
			}
		},
		onShow() {
			this.fetchData()
			this.fetchPrizeData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				request.get( 
					'/fczCoins/my', {}
				).then(res => {
					uni.hideLoading()
					console.log(res.totalCoin)
					this.fczCoin = res
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			fetchPrizeData() {
				request.get( 
					'/fczPrizes/search', {'status': 'on'}
				).then(res => {
					console.log(res)
					this.fczPrizeList = res.items
				}).catch(err => {
					console.log(err)
				})
			},
			exchangePrize(fczPrize) {
				const $this = this
				const content = '需求消耗' + fczPrize.needCost + '学习币,确定兑换吗?'
				uni.showModal({
					title: '提示',
					content: content,
					success: function (res) {
						if (res.confirm) {
							uni.showLoading()
							request.put( 
								'/fczCoins/exchange', 
								{ fczPrizeId: fczPrize.id }
							).then(res => {
								uni.hideLoading()
								uni.showToast({ icon: 'none', title: '提交成功，请等待后台审核'})
								$this.fetchData()
							}).catch(err => {
								uni.hideLoading()
								console.log(err)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.first_block{
			width: 100%;
			height: 180px;
			background-color: lightseagreen;
			display: flex;
			flex-direction: column;
			align-items: center;
			.coin_icon{
				width: 80px;
				height: 80px;
				margin-top: 20px;
			}
			.my_coin_block{
				color: white;
				display: flex;
				align-items: center;
				.coin_num{
					font-size: 35px;
					font-weight: 500;
					margin-right: 10px;
				}
				.coin_txt{
					font-size: 14px;
				}
			}
		}
		.prize_block{
			margin: 8px 15px;
			padding: 10px 15px;
			height: 60px;
			border: 1px solid coral;
			border-radius: 5px;
			display: flex;
			.left_block{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				.prize_name{
					font-size: 16px;
					font-weight: 400;
				}
				.prize_remark{
					font-size: 14px;
					color: #555555;
				}
			}
			.right_block{
				width: 100px;
				display: flex;
				align-items: center;
				.exchange_btn{
					font-size: 13px;
					color: white;
					width: 100%;
					height: 36px;
					border-radius: 20px;
					background-color: coral;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
